<template>
  <div class="flightInvoice">
    <el-form :model="results" :inline="true" size="mini" ref="ruleForm" label-width="100px">
      <div>
        <el-form-item label="会员编号">
          <el-input v-model="results.jsjid"></el-input>
        </el-form-item>
        <el-form-item label="发票类型">
          <el-select clearable v-model="results.type" placeholder="请选择活动区域">
            <!-- <el-option label="纸质发票" value=1></el-option> -->
            <el-option label="电子发票" value=2></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select clearable v-model="results.sourceway" placeholder="请选择活动区域">
            <el-option label="国内机票" value="1"></el-option>
            <el-option label="国际机票" value="2"></el-option>
            <el-option label="酒店" value="3"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <!-- <el-form-item label="发票种类">
          <el-select clearable v-model="results.sort" placeholder="请选择活动区域">
            <el-option label="专用发票" value=1></el-option>
            <el-option label="普通发票" value=2></el-option>
            <el-option label="定额发票" value=3></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="手机号">
          <el-input v-model="results.phone"></el-input>
        </el-form-item>

        <el-form-item label="订单号">
          <el-input v-model="results.ordernum"></el-input>
        </el-form-item>
      </div>

      <el-form-item label="申请开始时间">
        <el-date-picker value-format="yyyy-MM-dd" v-model="results.createTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申请结束时间">
        <el-date-picker value-format="yyyy-MM-dd" v-model="results.createTimeEnd" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="开票开始时间">
        <el-date-picker value-format="yyyy-MM-dd" v-model="results.actualtime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="开票结束时间">
        <el-date-picker value-format="yyyy-MM-dd" v-model="results.actualtimeEnd" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
       <el-form-item label="发票状态">
          <el-select clearable v-model="results.sort" placeholder="请选择活动区域">
            <el-option label="已开票" value=1></el-option>
            <el-option label="已预约" value=2></el-option>
            <el-option label="待支付" value=5></el-option>
            <el-option label="取消" value=6></el-option>
            <el-option label="冲红" value=11></el-option>
            <el-option label="作废" value=12></el-option>
            <el-option label="存储错误订单" value=15></el-option>
          </el-select>
        </el-form-item>
      <div style="margin-left:45%">
        <el-form-item>
          <el-button type="primary" @click="viewBillDetails">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData"
      :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px', fontWeight: 'normal'}" size="mini"
      border class="account_table">
      <el-table-column prop="jsjid" label="会员编号" width="150">
      </el-table-column>
      <!-- <el-table-column prop="sourceway" label="业务类型" width="100">
           <template slot-scope="scope">
              <template v-if="scope.row.exceptionType=='1'">待系统自动处理</template>
              <template v-if="scope.row.exceptionType=='2'">待人工处理</template>
              <template v-if="scope.row.exceptionType=='3'">处理完成</template>
          </template>
        </el-table-column> -->
      <el-table-column prop="ordernum" label="订单号" width="120">
      </el-table-column>
      <el-table-column prop="type" label="发票类型" width="90">
        <template slot-scope="scope">
          <template v-if="scope.row.type==1">纸质发票</template>
          <template v-if="scope.row.type==2">电子发票</template>
        </template>
      </el-table-column>
      <el-table-column prop="taxamount" label="金额" width="80"></el-table-column>
      <el-table-column label="配送状态" width="80"></el-table-column>
      <el-table-column prop="state" label="发票状态" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.state==1">未开票</template>
          <template v-if="scope.row.state==2">已预约</template>
          <template v-if="scope.row.state==4">已开票</template>
          <template v-if="scope.row.state==5">待支付</template>
          <template v-if="scope.row.state==6">取消</template>
          <template v-if="scope.row.state==11">冲红</template>
          <template v-if="scope.row.state==12">作废</template>
          <template v-if="scope.row.state==15">存储错误订单</template>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="exceptionType" label="发票种类" width="100">
           <template slot-scope="scope">
              <template v-if="scope.row.exceptionType=='1'">待系统自动处理</template>
              <template v-if="scope.row.exceptionType=='2'">待人工处理</template>
              <template v-if="scope.row.exceptionType=='3'">处理完成</template>
          </template>
        </el-table-column> -->
      <el-table-column prop="createTime" label="申请时间"></el-table-column>
      <el-table-column prop="drawer" label="开票人" width="120"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="100"></el-table-column>
      <el-table-column prop="actualtime" label="开票时间" width="140"></el-table-column>
      <!-- <el-table-column prop="createTime"  label="收款审核" width="200"></el-table-column> -->
      <el-table-column prop="operatorName"  label="审核人" width="90"></el-table-column>
      <el-table-column prop="checkstate" label="审核状态" width="90">
        <template slot-scope="scope">
          <template v-if="scope.row.checkstate==1">未审核</template>
          <template v-if="scope.row.checkstate==2">审核通过</template>
          <template v-if="scope.row.checkstate==3">审核失败</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="submit(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'flightInvoice',
    data() {
      return {
        // 订单号
        ordernumber: "",
        // 备注
        note: "",
        // 运单号
        theawbNum: "",
        // 分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 表格数据
        tableData: [],
        // 查询条件
        results: {
          jsjid: "",
          type: null,
          sourceway:"1",
          phone: "",
          sort: null,
          ordernum: "",
          createTime: "",
          createTimeEnd: "",
          actualtime: "",
          actualtimeEnd: "",
        },
      }
    },
    methods: {
      // 查询表格接口
      getinvoiceOrderList() {
        this.$axios.getinvoiceOrderList({
          jsjid: this.results.jsjid,
          type: Number(this.results.type),
          sourceway: Number(this.results.sourceway),
          phone: this.results.phone,
          sort: Number(this.results.sort),
          ordernum: this.results.ordernum,
          createTime: this.results.createTime,
          createTimeEnd: this.results.createTimeEnd,
          actualtime: this.results.actualtime,
          actualtimeEnd: this.results.actualtimeEnd,
        }).then((res) => {
          console.log(res)
          this.tableData = res.data
          this.pageTotal = res.total
        })
      },

      // 提交确认的回调
      backfillconfirm() {
        for (let i = 0; i < this.tableData.length; i++) {
          // 运单号
          this.theawbNum = this.tableData[i].this.tableData
          // 备注
          this.note = this.tableData[i].this.note
        }
      },
      // 查询按钮
      viewBillDetails() {
        this.getinvoiceOrderList()
      },
      // 详情按钮
      submit(row) {
        console.log(row.invoiceid)
        this.$router.push({
          name:"financeinvoicegetInfo",
           params: {
          invoiceid: row.invoiceid,
        },
        })
      },
      // 分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getinvoiceOrderList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.currentPage = value
        this.getinvoiceOrderList();
        // orders = res.data;
      },
    },
    mounted() {
      // 列表查询
      this.getinvoiceOrderList()
    },
  }
</script>

<style scoped>
  .flightInvoice {
    margin: 20px;
  }
</style>